<script setup>
import AddTasks from "./AddTasks.vue"
import deleteRemind from "./deleteRemind.vue"
import addIcon from '../assets/todolist_icon/add.svg?component'
import deleteIcon from '../assets/todolist_icon/delete.svg?component'
import unfinishedIcon from '../assets/todolist_icon/unfinished.svg?component'
import { useTodoListStore } from '../store/todoList'

let Todolist = useTodoListStore()

</script>


<template>
    <div id="TodoList">
        <header class="flex justify-between items-center">
            <div class="flex">
                <div class="w-2 self-stretch mr-2 my-2 rounded-xl bg-[#b2d9d6]"></div>
                <span class="text-3xl p-3 text-[#585858]">TodoList</span>
            </div>
            <addIcon @click="add()"></addIcon>
        </header>

        <hr class="my-2" />

        <main>
            <div v-if="tdlist.length > 0">
                <table>
                    <tbody>
                        <tr
                            v-for="(td, index) in tdlist"
                            v-bind:key="td.tid"
                            :class="{ current: currentIndex == index,finish: td.state == 3 }"
                        >
                            <td class="pt-2">
                                <deleteIcon @click="deleteTask(index)"></deleteIcon>
                            </td>
                            <td class="pt-2">
                                <unfinishedIcon v-on:click.stop="startTodo(td, index)"></unfinishedIcon>
                            </td>
                            <td class="pr-5 pt-2 font-bold">{{ td.title }}</td>
                            <td class="pt-2 text-opacity-50">{{ td.de }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div v-else class="text-center mt-10 text-gray-600 font-bold">No Data</div>
        </main>

        <div v-if="showModel" class="overflow-hidden">
            <AddTasks @addIt="newtodo" @closeIt="getClose"></AddTasks>
        </div>

        <div v-if="showPopup" class="overflow-hidden">
            <deleteRemind @deleteIt="getdelete"></deleteRemind>
        </div>
    </div>
</template>

<script>
import { mapActions, mapState } from 'pinia'
import { useTodoStore } from '../store/currentTodo'
import { useTodoListStore } from '../store/todoList'
import axios from 'axios'
export default {
    data() {
        return {
            showModel: false,
            showPopup: false,
            token: '',
            deleteIndex: null,
            currentIndex: null,
        };
    },
    created() {
        this.token = localStorage.getItem('token');

        this.getTasksList();
    },
    mounted() {

    },
    computed: {
        ...mapState(useTodoListStore, ['tdlist'])
    },
    methods: {
        getTasksList() {
            axios.get('http://49.232.214.76/normal/getAllTasks', {
                header: {
                    'Authorization': 'Bearer ' + this.token,
                }
            }).then(res => {
                console.log(res);
            })
        },
        ...mapActions(useTodoStore, ['changeCurrentTodo']),
        add() {
            var that = this;
            that.showModel = !that.showModel;
        },
        newtodo(newTask) {
            this.tdlist.push({
                'tid': this.guid(),
                'title': newTask.name,
                'de': newTask.de,
                'state': 0
            });
        },
        guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        },
        getClose(e) {
            console.log(e);
            var that = this;
            that.showModel = false;
        },
        deleteTask(index) {
            var that = this;
            that.deleteIndex = index;
            that.showPopup = !that.showPopup;
            //console.log(index);
        },
        getdelete(event) {
            var that = this;
            if (event == 1) {
                that.tdlist.splice(that.deleteIndex, 1);
            }
            that.showPopup = false;
        },
        startTodo(td, index) {
            this.changeCurrentTodo(td.tid, td.title);
            this.currentIndex = index;
        }
    }
}
</script>


<style scoped>
#TodoList {
    height: 15.625rem;
    overflow-y: auto;
}
.current {
    color: #b2d9d6;
}
.finish {
    text-decoration: line-through;
    color: dimgrey;
}
</style>